<template>
  <div class="total">

    <div @mouseover="mouseover" @mouseleave="mouseleave" class="image">

      <!-- 发现 -->
      <el-image :key="item.url" :src="item.url" alt="image" :class="hover ? 'image-hover' : ''" lazy v-if="isSearchTab"
        :style="{ width: 1.62 + 'rem' }" />
      <div class="img-left-top" v-if="hover && isSearchTab">
        <span class="colected" @click="collect(item)">
          <abbr title="收藏">
            <icon-star theme="outline" size="0.15rem" fill="#5fc5ba" />
          </abbr>
        </span>
      </div>

      <!-- 我的 -->
      <el-image :key="item.path" :src="baseUrl + item.path" alt="image" lazy v-if="!isSearchTab" />
      <div class="img-left-top" v-if="hover && (!isSearchTab)">
        <span class="not-colect" @click="cancelCollect(item)">
          <abbr title="取消收藏">
            <icon-star theme="two-tone" size="0.15rem" :fill="['#5fc5ba', '#5fc5ba']" />
          </abbr>
        </span>
      </div>

    </div>
    <div class="edit" v-if="info">
      <p>{{ info }}</p>
    </div>

    <!-- 添加收藏夹 dialog -->
    <el-dialog v-model="collectDialog.visible" title="" width="50%" draggable append-to-body>
      <FolderSelect />
      <el-button @click="collectDialog.visible = false" round>确定</el-button>
      <el-button type="primary" @click="confirmCollect" round>确定</el-button>
    </el-dialog>

    <!-- 取消收藏dialog -->
    <el-dialog v-model="cancelCollectDialog.visible" title="" width="50%" draggable append-to-body>
      <p>确定要取消收藏吗？</p>
      <template #footer>
        <el-button @click="cancelCollectDialog.visible = false" round>确定</el-button>
        <el-button type="primary" @click="confirmCancelCollect" round>确定</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import FolderSelect from "@/components/folder/folderSelect.vue";
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import { dialogType } from "./type";
import { ElMessage } from "element-plus";
import { debounce } from "@/hooks/tools";
import { usePhotoStore } from "@/store/photo";
import { post } from "@/tools/api/api";
/**
 * 组件初始化
 */
// 引入仓库
const photoStore = usePhotoStore()
// 拿到网站地址
const baseUrl = "http://ergou666.shop:8000";
//创建实例
const instance = getCurrentInstance();
onMounted(() => {
  isSearchTab.value = photoStore.isSearchTab;
})
// 接收props
type Props = {
  item: any
};
// props默认值
withDefaults(defineProps<Props>(), {
  item: ''
});


// 获取选中的tab信息
const isSearchTab = ref<boolean>()
instance?.proxy?.$Bus.on("onClickTab", (value: any) => {
  isSearchTab.value = value;
})



/**
 *  收藏相关
 */
// dialog数据
const collectDialog = reactive<dialogType>({
  visible: false,
  data: ''
})
// 收藏按钮
const collect = (item: any) => {
  collectDialog.visible = true;
  collectDialog.data = item;
};
// 确认收藏
const confirmCollect = () => {
  if (!photoStore?.currentFolder) {
    ElMessage.warning("请选择收藏夹")
    return
  }
  if (photoStore?.currentFolder.length != 3) {
    ElMessage.warning("只有小收藏夹下才能收藏图片")
    return
  }
  if (photoStore?.currentFolder) {
    collectDialog.data.favorite = photoStore.currentFolder[photoStore.currentFolder.length - 1]
  }
  post("collectImg", {
    favorite: collectDialog.data.favorite,
    url: collectDialog.data.url,
    type: collectDialog.data.type
  }).then((res: any) => {
    console.log('res',res)
    collectDialog.visible = false;
    if (res.code === 100) {
      ElMessage.success("已收藏")

    } else ElMessage.error(res.msg)
  })
}


// 取消收藏
//dialog数据
const cancelCollectDialog = reactive<dialogType>({
  visible: false,
  data: ''
})
// 按钮
const cancelCollect = (item: any) => {
  cancelCollectDialog.visible = true;
  cancelCollectDialog.data = item;
};
// 确认
const confirmCancelCollect = debounce(() => {
  if (!cancelCollectDialog.data?.id) {
    ElMessage.warning("图片不存在，请刷新后重试")
    return
  }
  console.log('cancelCollectDialog.data.id', cancelCollectDialog.data.id)
  post("delImg", {
    img_id: cancelCollectDialog.data.id + ''
  }).then((res: any) => {
    console.log('res', res);
    if (res.code === 100) {
      ElMessage.success("成功取消收藏")
      cancelCollectDialog.visible = false;
      instance?.proxy?.$Bus.emit("reload")
    } else ElMessage.error(res.msg)
  })
})


// 鼠标悬浮事件
const hover = ref<boolean>(false)
const mouseover = () => {
  hover.value = true
};
// 鼠标离开
const mouseleave = () => {
  hover.value = false;
};

// 收藏与否
const isCollect = ref<boolean>(false)

const info = ref("");

</script>

<style lang="scss" scoped>
$item-height: 0.36rem;
$item-width: 0.6rem;
$a-font-size: 0.08rem;
$theme-color: rgb(96, 197, 186); //#5fc5ba

.total {
  break-inside: avoid;
  width: $item-width * 2;
  height: auto;
  color: #425551;


  .image {
    width: auto;
    height: auto;
    position: relative;
    margin-top: 0.1rem;

    ::v-deep(.el-image) {
      width: $item-width * 2.9;
      border-radius: 0.1rem;

      img {
        width: $item-width * 2.7;
        max-height: $item-height*24;
        break-inside: avoid;
        border-radius: 0.1rem;
      }
    }

    .img-left-top {
      width: 0.2rem;
      height: 0.1rem;
      height: auto;
      position: absolute;
      top: 0.06rem;
      left: 0.1rem;
    }

    // 鼠标悬浮--整体样式
    &:hover {
      transform: scale(1.01, 1.01);
    }

    // 鼠标悬浮--图片样式
    .image-hover {
      filter: brightness(70%) contrast(90%)
    }

  }



  .edit {
    height: $item-height * 0.8;
    text-align: center;

    span {
      font-size: 0.1rem;
    }
  }
}


span {
  cursor: pointer;
}

@media screen and (max-width:1024px) {
  .total {
    width: $item-width * 4;

    img {
      width: $item-width * 4.8;

    }

    .edit {
      height: $item-height * 1.5;
    }
  }
}

@media screen and (max-width:600px) {
  .total {
    width: $item-width * 7.5;

    img {
      width: $item-width * 7.3;

    }

    .edit {
      height: $item-height * 3;
    }
  }
}
</style>
